<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像视觉相似度判断</title>
    <style>
        p img {
            display: block;
            max-width: 300px;
        }
    </style>
</head>
<body>
    <form action="">
        选择文件：<input type="file" id="file" accept="image/*">
        <p id="preview"></p>
    </form>
    <script src="color-thief.js"></script>
    <script src="./image-similarity.js"></script>
    <script>
        var reader = new FileReader();
        // 读文件成功的回调
        reader.onload = function(e) {
            // e.target.result就是图片的base64地址信息
            let src = e.target.result;

            imageSimilarity(src).then(similarity => {
                // 0 极度相似
                // 1 相似
                // 2 不太相似
                // 3 不相似
                // 4 差异较大
                if (similarity === 0) {
                    preview.append('视觉色彩极度相似');
                } else if (similarity === 1) {
                    preview.append('视觉色彩相似');
                } else if (similarity === 2) {
                    preview.append('视觉色彩不太相似');
                } else if (similarity === 3) {
                    preview.append('视觉色彩不相似');
                } else {
                    preview.append('视觉色彩差异较大');
                }
            });

            preview.innerHTML = `<img src="${src}">`;
        };
        file.addEventListener('change', function (event) {
            reader.readAsDataURL(event.target.files[0]);
        });
    </script>
</body>
</html>